<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="header-left">
            <img class="logo" src="../assets/img/logo.png" alt="" />
            <div class="web-title">后台管理系统</div>
            <div class="collapse-btn" @click="collapseChage">
                <el-icon v-if="sidebar.collapse">
                    <Expand />
                </el-icon>
                <el-icon v-else>
                    <Fold />
                </el-icon>
            </div>
        </div>
        <div class="header-right">
            <div class="header-user-con">
                <!-- <div class="btn-icon" @click="router.push('/theme')">
                    <el-tooltip effect="dark" content="设置主题" placement="bottom">
                        <i class="el-icon-lx-skin"></i>
                    </el-tooltip>
                </div> -->
                <!-- <div class="btn-icon" @click="router.push('/ucenter')">
                    <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
                        <i class="el-icon-lx-notice"></i>
                    </el-tooltip>
                    <span class="btn-bell-badge" v-if="message"></span>
                </div> -->
                <div class="btn-icon" @click="setFullScreen">
                    <el-tooltip effect="dark" content="全屏" placement="bottom">
                        <i class="el-icon-lx-full"></i>
                    </el-tooltip>
                </div>
                <!-- 用户头像 -->
                <el-avatar class="user-avator" :size="30" :src="imgurl" />
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ username }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="editPassWord" @click="changePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <!-- 修改密码 -->
        <el-dialog title="修改密码" v-model="visibleEidt" width="300px" destroy-on-close :close-on-click-modal="false"
            @close="closeDialog">
            <div class="changePass">
                <span>新密码 ：</span> <el-input type="password" v-model="params.password" />
            </div>
            <div class="changePass">
                <span>确认密码 ：</span> <el-input type="password" v-model="params.confirm_password" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitChange">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref, reactive } from 'vue';
    import { useSidebarStore } from '../store/sidebar';
    import { useRouter } from 'vue-router';
    import imgurl from '@/assets/img/logo.png';
    import { agentLogout, agentModifyPassword } from '@/api'
    import { ElMessage } from 'element-plus';
    const username: string | null = localStorage.getItem('vuems_name');
    const message: number = 2;
    const sidebar = useSidebarStore();
    const visibleEidt = ref(false);
    let params = reactive({
        password: '',
        confirm_password: ''
    })
    // 侧边栏折叠
    const collapseChage = () => {
        sidebar.handleCollapse();
    };

    onMounted(() => {
        console.log(document.body.clientWidth, 'aa');
        if (document.body.clientWidth < 600) {
            sidebar.collapse = true

        } else {
            collapseChage();
        }
    });

    // 用户名下拉菜单选择事件
    const router = useRouter();
    const handleCommand = async (command: string) => {
        if (command == 'loginout') {
            let res = await agentLogout()
            ElMessage.success(res.msg)
            localStorage.removeItem('vuems_name');
            localStorage.removeItem('token');
            router.push('/login');
        } else if (command == 'user') {
            router.push('/ucenter');
        }
    };

    const setFullScreen = () => {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            document.body.requestFullscreen.call(document.body);
        }
    };
    // 修改密码
    const changePassword = () => {
        visibleEidt.value = true
    }
    const closeDialog = () => {
        visibleEidt.value = false;
        params.password = ''
        params.confirm_password = ''
    }
    const submitChange = async () => {
        if (params.password == '') {
            ElMessage.error('请输入新密码')
            return
        }
        if (params.confirm_password == '') {
            ElMessage.error('请确认新密码')
            return
        }
        if (params.password != params.confirm_password) {
            ElMessage.error('两次输入的密码不一致')
            return
        }
        // 提交修改密码请求
        let res = await agentModifyPassword(params)
        if (res.code == 1) {
            ElMessage.success('修改成功')
            // 关闭弹窗
            closeDialog()
        }
    }
</script>
<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        color: var(--header-text-color);
        background-color: var(--header-bg-color);
        border-bottom: 1px solid #ddd;
    }

    .header-left {
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 100%;
    }

    .logo {
        width: 35px;
    }

    .web-title {
        margin: 0 40px 0 10px;
        font-size: 22px;
    }

    .collapse-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0 10px;
        cursor: pointer;
        opacity: 0.8;
        font-size: 22px;
    }

    .collapse-btn:hover {
        opacity: 1;
    }

    .header-right {
        float: right;
        padding-right: 50px;
    }

    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }

    .btn-fullscreen {
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }

    .btn-icon {
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--header-text-color);
        margin: 0 5px;
        font-size: 20px;
    }

    .btn-bell-badge {
        position: absolute;
        right: 4px;
        top: 0px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: var(--header-text-color);
    }

    .user-avator {
        margin: 0 10px 0 20px;
    }

    .el-dropdown-link {
        color: var(--header-text-color);
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }

    .changePass {
        margin: 12px;

    }

    @media screen and (max-width:600px) {
        .web-title {
            display: none;
        }
    }
</style>